<template>
    <view>
        <view class="container">
            <view class="content-top">
                <view class="scan-box" @click="scan">
                    <view class="scan-btn">
                        <view class="scan-icon">
                            <view class="top" />
                            <view class="middle" />
                            <view class="bottom" />
                        </view>
                    </view>
                    <view class="scan-text-top">扫描二维码领取</view>
                </view>
                <view class="scan-text-middle">或</view>
                <view class="scan-text-bottom">输入卡号领取</view>
                <view class="">
                    <!-- <van-form ref="subForm" class="">
            <van-field
              v-model="info.couponCode"
              name="卡号"
              label="卡号"
              placeholder="请输入卡号"
              :rules="[{ required: true, message: ' ' }]"
            />
            <van-field
              v-model="info.pwdcode"
              name="密码"
              label="密码"
              placeholder="请输入密码"
              :rules="[{ required: true, message: ' ' }]"
            /> -->
                    <view class="custom-cell">
                        <text class="cell-label">卡号</text>
                        <view class="cell-main">
                            <input
                                class="cell-input"
                                type="number"
                                v-model="info.couponCode"
                                placeholder="请输入卡号" />
                        </view>
                    </view>
                    <view class="custom-cell">
                        <text class="cell-label">密码</text>
                        <view class="cell-main">
                            <input class="cell-input" password v-model="info.pwdcode" placeholder="请输入密码" />
                        </view>
                    </view>
                    <view class="tac">
                        <text class="submit-btn bg-primary" type="info" @click="handleSubmit">确认</text>
                    </view>
                    <!-- </van-form> -->
                </view>
            </view>
        </view>

        <!-- 提示弹窗 -->
        <uni-popup ref="tip" type="dialog">
            <uni-popup-dialog
                type="text"
                title="提示"
                content="是否领取提货券？"
                :before-close="true"
                @close="close"
                @confirm="save"></uni-popup-dialog>
        </uni-popup>

        <!-- 领取成功弹窗 -->
        <uni-popup ref="successDialog" type="dialog">
            <view
                class="success-dialog-box"
                :style="{
                    backgroundImage: 'url(' + require('@/static/img/success-dialog-bg.png') + ')',
                    backgroundSize: '100% 100%',
                }">
                <view class="close-btn" @click="closeSuccessDialog" />
                <view class="box-title">恭喜成功领取</view>
                <view class="box-money">
                    <view class="money text-show-line-1">{{ modelData.Money }}</view>
                    <view v-if="modelData.MoneyType == 1" class="unit">积分</view>
                    <view v-if="modelData.MoneyType == 2" class="unit">元</view>
                </view>
                <view class="box-discribe">
                    <view class="discribe text-show-line-1">{{ modelData.Title }}</view>
                </view>
                <view class="bottom-box">
                    <text class="left-btn" @click="closeSuccessDialog">再次绑定</text>
                    <text class="right-btn" @click="goHome">商城消费</text>
                </view>
            </view>
        </uni-popup>
    </view>
</template>
<script>
import { GiveStarcoupon, GiveStarcouponByEnId } from "@/service/api/starcoupon.js"
import storage from "@/uni-sub-base/utils/storage.js"
export default {
    data: function () {
        return {
            info: {},
            code: "",
            modelData: {},
            showSuccessDialog: false,
            isEncryption: false,
        }
    },
    created() {},
    methods: {
        // 扫码领取
        scan() {
            const _this = this
            // #ifdef H5
            // 此处添加微信jssdk，调用微信扫码
            // #endif
            // #ifndef H5
            uni.scanCode({
                success: (res) => {
                    const data = res.result
                    if (data.lastIndexOf("-") >= 0) {
                        _this.code = data.substring(data.lastIndexOf("-") + 1, data.length)
                        _this.isEncryption = true
                        _this.$refs.tip.open()
                    } else {
                        _this.easyToast("您的券码有误，请查证后重试")
                    }
                },
            })
            // #endif
        },
        //关闭提示
        close() {
            this.$refs.tip.close()
        },
        closeSuccessDialog() {
            this.$refs.successDialog.close()
        },
        handleSubmit() {
            this.$refs.successDialog.open()
            if (!this.info.couponCode || this.info.couponCode == "") {
                this.easyToast("卡号不能为空")
                return false
            }
            if (!this.info.pwdcode || this.info.pwdcode == "") {
                this.easyToast("密码不能为空")
                return false
            }
            this.isEncryption = false
            this.$refs.tip.open()
        },
        save() {
            // 这里要调用领取接口了
            this.$refs.tip.close()
            if (this.isEncryption) {
                this.GiveStarcouponByEnId(this.code)
            } else {
                this.GiveStarcoupon(this.info)
            }
        },
        GiveStarcoupon(param) {
            GiveStarcoupon(param).then((res) => {
                if (res.State) {
                    this.info = {}
                    this.code = ""
                    this.modelData = res.Data || {}
                    // this.showSuccessDialog = true
                    this.$refs.successDialog.open()
                } else {
                    this.easyToast(res.Msg)
                }
            })
        },
        GiveStarcouponByEnId(param) {
            GiveStarcouponByEnId(param).then((res) => {
                if (res.State) {
                    this.info = {}
                    this.code = ""
                    this.modelData = res.Data || {}
                    this.$refs.successDialog.open()
                } else {
                    this.easyToast(res.Msg)
                }
            })
        },
        goHome() {
            this.easyGoProduct()
        },
        onNavigationBarButtonTap(e) {
            this.easyGoTo("/pages_me/packet/deliveryCard/list")
        },
    },
}
</script>
<style lang="scss" scoped>
.content-top {
    margin: 24rpx 30rpx;
}

.scan-box {
    background-color: #fff;
    border-radius: 24rpx;
    padding-top: 70rpx;
    padding-bottom: 70rpx;
}

.scan-btn {
    width: 184rpx;
    height: 184rpx;
    border-radius: 50%;
    position: relative;
    margin: 0 auto;
    background: $app-color-main;

    .scan-icon {
        color: #fff;
        width: 70rpx;
        height: 70rpx;
        position: absolute;
        top: calc(50% - 35rpx);
        left: calc(50% - 35rpx);

        .top:before,
        .bottom:before,
        .top:after,
        .bottom:after {
            content: "";
            width: 16rpx;
            height: 16rpx;
            border-radius: 2rpx;
            border: 4rpx solid;
            position: absolute;
        }

        .top:before {
            border-color: currentColor currentColor transparent transparent;
            top: 0;
            right: 0;
        }

        .top:after {
            border-color: currentColor transparent transparent currentColor;
            top: 0;
            left: 0;
        }

        .bottom:before {
            border-color: transparent transparent currentColor currentColor;
            bottom: 0;
            left: 0;
        }

        .bottom:after {
            border-color: transparent currentColor currentColor transparent;
            bottom: 0;
            right: 0;
        }

        .middle {
            width: 96rpx;
            height: 4rpx;
            position: absolute;
            top: calc(50% - 2rpx);
            left: -13rpx;
            background: linear-gradient(
                135deg,
                rgba(255, 255, 255, 0.3) 0%,
                #ffffff 51%,
                rgba(255, 255, 255, 0.3) 100%
            );
        }
    }
}

.scan-text-top {
    text-align: center;
    font-size: 32rpx;
    margin-top: 36rpx;
}

.scan-text-middle {
    margin-top: 32rpx;
    font-size: 28rpx;
    color: #666;
    text-align: center;
}

.scan-text-bottom {
    margin-top: 32rpx;
    font-size: 32rpx;
    text-align: center;
}

.van-field {
    margin-top: 12rpx;
    border-radius: 12rpx;

    &:after {
        content: none;
    }
}

/deep/.van-field__label {
    width: 61rpx;
}

.tac {
    text-align: center;
}

.submit-btn {
    margin: 42rpx auto;
    display: inline-block;
    line-height: 96rpx;
    padding: 0 108rpx;
    border-radius: 48rpx;
    font-size: 36rpx;
    border: none;
    background: $app-color-main;
    color: #fff;
}

.dialog {
    /deep/.van-dialog__confirm,
    .van-dialog__confirm:active {
        color: $app-color-main;
    }

    .input-1 {
        line-height: 3;
        padding: 0 20rpx;
        background: #f7f7f7;
        border-radius: 12rpx;
    }

    .dialog-btn {
        background: #fff;

        &:active {
            background: #f7f7f7;
        }
    }
}

.success-dialog-box {
    width: calc(100vw - 50rpx);
    margin: 0 auto;
    height: 0;
    padding-top: 100.3%;
    position: relative;

    .close-btn {
        width: 60rpx;
        height: 60rpx;
        border-radius: 50%;
        color: #fff;
        border: 4rpx solid currentColor;
        position: absolute;
        top: 0;
        right: 0;

        &:before,
        &:after {
            content: "";
            width: 30rpx;
            height: 4rpx;
            background: currentColor;
            position: absolute;
            left: calc(50% - 15rpx);
            top: calc(50% - 2rpx);
            transform: rotate(45deg);
        }

        &:after {
            transform: rotate(-45deg);
        }
    }

    .box-title {
        position: absolute;
        text-align: center;
        width: 100%;
        font-size: 54rpx;
        top: 182rpx;
        color: #ffdc97;
    }

    .box-money {
        width: 212rpx;
        height: 178rpx;
        position: absolute;
        left: 30rpx;
        top: 274rpx;
        color: #fa0209;
        flex-direction: column;
        text-align: center;
        display: flex;
        justify-content: center;
        align-items: center;
    }
    .money {
        font-size: 64rpx;
        line-height: 1;
        font-weight: bold;
    }
    .unit {
        font-size: 32rpx;
    }

    .box-discribe {
        width: 300rpx;
        height: 178rpx;
        padding: 0 24rpx;
        position: absolute;
        left: 240rpx;
        top: 274rpx;
        display: flex;
        justify-content: center;
        flex-direction: column;
    }
    .discribe {
        font-size: 36rpx;
        font-weight: bold;
    }

    .bottom-box {
        position: absolute;
        width: 100%;
        bottom: 64rpx;
        padding: 0 30rpx;
        display: flex;
        justify-content: space-between;
        align-items: center;
        box-sizing: border-box;

        .left-btn,
        .right-btn {
            box-sizing: border-box;
            height: 88rpx;
            line-height: 88rpx;
            background: #fde4a5;
            padding: 0 70rpx;
            border-radius: 44rpx;
            color: #fc4243;
            font-size: 32rpx;
        }

        .left-btn {
            background: transparent;
            color: #fee3a1;
            line-height: 84rpx;
            border: 2rpx solid currentColor;
        }
    }
}

.custom-cell {
    display: flex;
    flex-direction: row;
    align-items: center;
    background: $color-white;
    // min-height: 66rpx;
    padding: 28rpx;
    border-radius: 24rpx;
    margin-top: 24rpx;

    .cell-label {
        display: flex;
        flex: 1;
        font-size: 32rpx;
    }

    .cell-main {
        display: flex;
        flex: 3;
        overflow: hidden;

        .cell-value {
            flex: 1;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            color: $app-color-text-desc;
            font-size: $font-size-32;
        }

        .cell-input {
            color: $app-color-text-desc;
            font-size: $font-size-32;
        }
    }

    .cell-textarea {
        height: 160rpx;
        color: $app-color-text-desc;
        font-size: $font-size-28;
    }

    .icon-location {
        padding: $app-page-padding;
        margin-right: -$app-page-padding;
    }
}
</style>
